<template>
    <div class="dataQuery">
        <SearchBox :formItemList="formItemList" @search="handleSearch" ref="SearchBoxName" @resetForm="resetForm">
        </SearchBox>
            <div style="margin-bottom:20px">
                <el-button @click="openDemoDialog" type="primary">
                    <el-icon :size="20">
                        <DocumentAdd />
                    </el-icon>
                    新增
                </el-button>
                <el-button @click="delDialogShow" type="danger">
                    <el-icon :size="20">
                        <Delete  />
                    </el-icon>
                    删除
                </el-button>
            </div>
			<div style="width: 100%;">
                <el-table :data="tableData" border style="width: 100%"  @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="userName" label="角色名称" width="180" />
                <el-table-column prop="order" label="显示顺序" />
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <el-button type="success" v-if="scope.row.status == 1" plain>正常</el-button>
                        <el-button type="danger" v-if="scope.row.status == 0" plain>禁用</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="notes" label="创建时间" />>
                <el-table-column label="操作">
                <template #default="scope">
                    <!--  -->
                <div class="btn_com"  @click="dialogEdit(scope.row)">
                    <el-icon size="middle" color="green">
                    <Edit />
                </el-icon>
                    编辑
                </div>
                    <span class="line_btn"></span>
                    <!-- @click="delFn" -->
                <div class="btn_com"  @click="delDialogShow">
                    <el-icon size="middle" color="red">
                    <Delete />
                </el-icon>
                    删除
                </div>
                <span class="line_btn"></span>
                <div class="btn_com" @click="authorityShow">
                    <el-icon size="middle" color="blue">
                    <Warning />
                </el-icon>
                    权限
                </div>
                </template>
                </el-table-column>
                </el-table>
                <div class="page-box">
                    <span class="page-number">
                    {{pageNumber==1 ? '首页' : `第${pageNumber}页`}}
                    </span>
                    <el-pagination
					v-model:current-page="currentPage4"
					v-model:page-size="pageSize4"
					:page-sizes="[100, 200, 300, 400]"
					:small="small"
					:background="background"
					layout="prev,pager,next,jumper,slot"
					:total="400"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
	>
			<div>页</div>
	</el-pagination>
                </div>
            </div>
    <!-- 新增或编辑弹窗 -->
    <commonDialogDevice  ref="commonDialogDeviceRef" :dialogTitle="dialogTitle" :width="formLabelWidth">
        <template #content>
            <el-form 
                :model="form"
                ref="ruleFormRef"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                status-icon
                >
                <el-form-item label="角色名称"  prop="roleName">
                    <el-input v-model="form.roleName" autocomplete="off"  placeholder="请输入" />
                </el-form-item>
                <el-form-item label="角色顺序"  prop="roleOrder">
                    <el-input-number v-model="form.roleOrder" :min="1" placeholder="请输入" style="width: 100%;"/>
                </el-form-item>
                <el-form-item label="真实姓名"  prop="realName">
                    <el-radio-group v-model="form.realName">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="0" >禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注"  prop="notes">
                    <el-input v-model="form.notes" autocomplete="off" placeholder="请输入"/>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
<div class="dialog-footer">
    <el-button type="primary" @click="addSubmit(ruleFormRef)">确 认</el-button>
<el-button @click="addClose(ruleFormRef)">取 消</el-button>
</div>
</template>
    </commonDialogDevice>
    <!-- 删除弹窗 -->
    <commonDialogDevice ref="delDialogDeviceRef" :dialogTitle="delDialogTitle" :width="formLabelWidth">
        <template #content>
		<span>确认要删除选中的用户信息吗？</span>
        </template>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="delSubmit('delDialogDeviceRef')">确 认</el-button>
                <el-button @click="delClose('delDialogDeviceRef')">取 消</el-button>
            </div>
        </template>
    </commonDialogDevice>
    <!-- 权限弹窗 -->
    <commonDialogDevice ref="authorityRef" :dialogTitle="authorityDialogTitle" :width="formLabelWidth">
        <template #content>
            <el-tree
                ref="treeRef"
                :data="data"
                show-checkbox
                default-expand-all
                node-key="id"
                highlight-current
                :props="defaultProps"
                @check = 'checkTree'
            />
        </template>
        <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="authoritySubmit('delDialogDeviceRef')">确 认</el-button>
            <el-button @click="authorityCancel('delDialogDeviceRef')">取 消</el-button>
        </div>
        </template>
    </commonDialogDevice>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,nextTick} from 'vue'
import commonDialogDevice from '@/components/dialog.vue'
// import delDialogCompoent from '@/components/delDialog.vue'
// import authorityDialogCompoent from '@/components/delDialog.vue'
// 导入搜索组件
import SearchBox from '@/components/SearchBox.vue'
// 导入表单验证相关方法属性
import type { FormInstance, FormRules } from 'elemen-plus'
// 导入树相关方法
import type Node from 'element-plus/es/components/tree/src/model/node'
import { ElTree } from 'element-plus'
type TableList = {
    id:string,
    userName:string,
    order:number,
    status:number,
    notes: string,
}[]
const tableData = ref<TableList>([
    { 
        id:'11',
        userName:'小明',
        order:2,
        status: 1,
        notes: '这是一件好事',
    },
    {   id:'12',
        userName:'小明',
        order:2,
        status: 0,
        notes: '这是一件好事',
    },
    { 
        id:'13',
        userName:'小明',
        order:2,
        status: 1,
        notes: '这是一件好事',
    },
    { 
        id:'14',
        userName:'小明',
        order:2,
        status: 0,
        notes: '这是一件好事',
    }
])
const dialogTitle = ref('')
const formLabelWidth = '500px'
const title = ref('')
const diaTtitle = ref('')
// 新增表单属性
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
type FormItem =  {
	id?:string,
	roleName:string,
	roleOrder: number,
	realName:number,
	notes:string,
}
let form = reactive<FormItem>({
    id:'',
	roleName:'',
	roleOrder: 1,
	realName:1,
	notes:'',
})
// 定义表单规则
const rules = reactive<FormRules<FormItem>>({
	roleName: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    ],
    roleOrder: [
        { required: true, message: '请输入角色顺序', trigger: 'blur' },
        ],
        realName: [
        { required: true, message: '请选择真实姓名状态', trigger: 'change' },
    ],
    notes: [
        { required: true, message: '请输入备注', trigger: 'blur' },
    ]
})
// 新增数据
let commonDialogDeviceRef = ref()
const openDemoDialog = () => {
dialogTitle.value = '创建角色'
    // form = {
    //     roleName:'',
    //     roleOrder: 1,
    //     realName:1,
    //     notes:'',
    // }
commonDialogDeviceRef.value.show();
}
// 新增保存
const addSubmit= (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid:boolean) => {
    if (valid) {
			if(form.id){
				console.log('这是编辑的保存')
			}else {
				console.log('这是新增的保存')
			}
			commonDialogDeviceRef.value.cancel()
			formEl.resetFields()
    } else {
      console.log('error submit!')
      return false
    }
  })
}
// 新增关闭
const addClose = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  commonDialogDeviceRef.value.cancel()
}
// 编辑
// 编辑弹窗
const dialogEdit = (row:any)=>{
	dialogTitle.value = '编辑角色'
	form= {
        roleName:row.userName,
        roleOrder: row.order,
        realName:row.status,
        notes:row.notes,
        }
        form.id = row.id
        console.log(row,'row-------------')
	commonDialogDeviceRef.value.show();
}
// 表格全选方法
const handleSelectionChange = (val:any)=>{
    let ids = val.map((item:any)=>item.id)
    console.log(ids,'ids')
}
// 分页器组件属性
const pageNumber = ref(1)
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(true)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    pageNumber.value = val
}
// 删除弹框属性
const delDialogDeviceRef = ref()
const delDialogTitle = ref('提示')
const delDialogShow = ()=>{
    delDialogDeviceRef.value.show()
}
const delSubmit = ()=>{
    console.log('确定删除')
    delDialogDeviceRef.value.cancel()
}
const delClose = ()=>{
    console.log('取消删除')
    delDialogDeviceRef.value.cancel()
}
// 权限属性
const authorityRef = ref()
const authorityDialogTitle = ref('角色权限')
const authorityShow = ()=>{
    authorityRef.value.show()
}
const authoritySubmit = ()=>{
    authorityRef.value.cancel()
}
const authorityCancel = ()=>{
    authorityRef.value.cancel()
}
interface Tree {
    id: number
    label: string
    children?: Tree[]
}
const treeRef = ref<InstanceType<typeof ElTree>>()
    const defaultProps = {
    children: 'children',
    label: 'label',
    }

    const data: Tree[] = [
    {
        id: 1,
        label: '短报文资源调控管理系统',
        children: [
        {
            id: 4,
            label: '数据收发与管理',
        },
        {
            id: 5,
            label: '短报文资源使用监控',
        },
        {
            id: 6,
            label: '资源调控指令生成与同步',
        },
        {
            id: 7,
            label: '系统状态监视',
        },
        ],
    }
    ]
    const checkTree = (checkedNodes:any,checkedKeys:any,halfCheckedNodes:any,halfCheckedKeys:any)=>{
        console.log(checkedNodes,checkedKeys,halfCheckedNodes,halfCheckedKeys,'checkTree')
    }
// 搜索组件相关数据
const SearchBoxName = ref()
const formItemList = ref ( [
        {
		label: "用户名",
		type: "input",
		param: "stationName",
	},
	{
		label: "所属部门",
		type: "select",
		selectOptions: [
		{
			value: 'all',
			label: '全部',
		},
		{
			value: '1',
			label: '选项1',
		},
		{
			value: '2',
			label: '选项2',
		},
		{
			value: '3',
			label: '选项3',
		},
		{
			value: '4',
			label: '选项4',
		},
		],
		// 这个是存放下拉框的默认值
		defaultSelect: '全部',
		param: "all",
		multiple: false,
	},
	{
		label: "创建时间",
		type: "daterange",
		param: "timerange",
		startPlaceholder: "开始时间",
		endPlaceholder: "结束时间",
	},
	])
	// 搜索
const handleSearch = ()=>{
		console.log(SearchBoxName.value?.formInline    
,'点击了搜索按钮')
	}
	const resetForm = ()=>{
		SearchBoxName.value?.resetForm()
	}
</script>

<style lang="scss" scoped>
.dataQuery {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .nav-box {
        width: 220px;
        height: 100%;
        background: rgba(3,36,51,0.8);
        border-radius: 3px;
        border: 1px solid #2c6188;
    }
    .content-box {
        width: calc(100% - 230px);
        margin-left: 10px;
        height: 100%;
        padding: 60px 20px 10px;
        box-sizing: border-box;
        position: relative;
        .title-box {
            width: 100%;
            height: 47px;
            position: absolute;
            top:0px;
            left: 0px;
            display: flex;
            justify-content: flex-start;
            letter-spacing: 1px;
            color:#fff;
            padding: 13px 24px;
            box-sizing: border-box;
        }
        .line-v {
            width: 5px;
            height: 16px;
            background-color: #ffbd3e;
            left: 2px;
            top:16px;
        }
        .title {
            font-size:22px;

        }
        .subtitle {
            height: 22px;
            margin-left: 15px;
            background: linear-gradient(180deg,#fffed8 0%,#37fffb 100%);
            font-size: 22px;
            line-height: 22px;
            // 通过将背景剪切在元素的内容区域内部，可以实现文本裁剪效果。
            -webkit-background-clip: text;
            // 文字颜色填充
            -webkit-text-fill-color: transparent;
        }

    }
    .btn_com {
  display: inline-block;
  padding:5px;
  cursor: pointer;
}
.line_btn{
    display: inline-block;
    width: 1px;
    height: 10px;
    line-height: 10px;
    background: darkgray;
}
.dialog-footer{
    text-align: center;
}
.page-number {
    margin-right: 20px;
}
.page-box {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-right: 6px;
    
}
::v-deep .el-tree--highlight-current .el-tree-node.is-checked > .el-tree-node__content {
    color:#409eff !important;
}
}

</style>